<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">

    <el-tab-pane label="接口说明" name="first">
      <el-button @click="downloadFile('加密请求范例.txt')" style=" position: fixed; bottom: 20px; right: 20px;">
        加密请求示例
      </el-button>
      <el-row :gutter="10" style="margin: 8px; display: flex; flex-flow: row wrap;">
        <el-col :span="9">
          <el-card style="height: 100%;">
            <div slot="header" class="clearfix">
              <span>产品特点</span>
            </div>
            <ul>
              <template v-for="(item, index) in ywcs.cptd">
                <li>
                  {{ item.title }} <br/>
                  {{ item.info }} <br/>
                </li>
              </template>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="9">
          <el-card class="update-log" style="height: 100%;">
            <div slot="header">
              <span>应用场景</span>
            </div>
            <div class="body">
              <ul>
                <template v-for="(item, index) in ywcs.yycj">
                  <li>
                    {{ item.title }} <br/>
                    {{ item.info }} <br/>
                  </li>
                </template>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="height: 100%;">
            <div slot="header">
              <span>其它</span>
            </div>
            <ul>
              <template v-for="(item, index) in ywcs.qt">
                <li>
                  {{ item.title }} <br/>
                  {{ item.info }} <br/>
                </li>
              </template>
            </ul>
          </el-card>
        </el-col>
      </el-row>

      <table class="table table-bordered" style="margin: 10px">
        <tbody>
        <tr v-if="interItem.jfCode != 'JF021'">
          <th colspan="3" class="a-IRR-header a-IRR-header--group">
            <el-steps :active="4" align-center>
              <el-step title="步骤1" description="发送Http请求，请求头携带：mccode(商户号)字段信息。URL见下方"></el-step>
              <el-step title="步骤2" description="取请求体明文样例填充接口编号，时间戳，请求单号。准备好req_params查询参数值(JSON)"></el-step>
              <el-step title="步骤3"
                       description="req_params查询参数值使用AES-CBC加密模式结合提供的商户密钥进行加密构成查询参数密文，密文作为req_params真正的值"></el-step>
              <el-step title="步骤4" description="发起请求，查询成功提取retdata的值，对其解密获得明文有效信息"></el-step>
            </el-steps>
          </th>
        </tr>
        <tr>
          <td>当前接口</td>
          <td>
            <pre>接口名称：{{ interItem.name }} | 接口编号：{{ interItem.jfCode }}</pre>
          </td>
        </tr>

        <tr>
          <td>请求头信息</td>
          <td>
            <pre>编码格式: UTF8</pre>
            <pre>上下文类型(CONTENT-TYPE): application/json</pre>
            <pre>请求头携带mccode商户号字段: 必填,注册后获得的接入商户号,如"JFM999*******" (在控制台接口信息中可查看) </pre>
          </td>
        </tr>
        <tr>
          <td>请求URL</td>
          <td>
            <pre v-if="interItem.jfCode == 'JF019'">主动获取结果请求: http://jiekou.funishe.com/prod-api/jiekou/getCreditData (GeT请求)</pre>
            <pre
              v-else-if="interItem.jfCode == 'JF021'">请求: http://jiekou.funishe.com/prod-api/jiekou/jufaAndi (Post请求；此接口参数不加密)</pre>
            <pre v-else>查询请求: http://jiekou.funishe.com/prod-api/jiekou/jufa  (Post请求) </pre>
          </td>
        </tr>
        <tr>
          <td>明文Request JSON样例</td>
          <td>
            <pre style="white-space: pre-line;"> {
             "request_sn": "20230602020740639KIBG",
             "req_time": "1701247396000",
             "inter_id": "{{ interItem.jfCode }}",
              <template v-if="interItem.jfCode == 'JF021'">
                <template v-for="(value, key, index) in this.ywcs.input">"{{ key }}": "{{ value }}"
                </template>}
              </template>
              <template v-if="interItem.jfCode != 'JF021'">"req_params":{{ this.ywcs.input }}
                }</template>
        </pre>
          </td>
        </tr>
        <tr>
          <td>明文Request JSON样例说明</td>
          <td>
            <pre>request_sn: 为本次请求订单号，不可重复，需自行生成(24位以内)
req_time: 为请求时间戳(Linux格式)
inter_id: 为接口产品编号(本例中为{{ interItem.jfCode }})
<template v-if="interItem.jfCode != 'JF021'">req_params: 为此接口业务入参。</template><template
                v-if="interItem.jfCode == 'JF019'">
            name: 姓名
            cardNo: 身份证号
            mobile: 手机号
            idCardFront: 身份证正面照片（OSS网络连接）
            idCardReverse: 身份证反面照片（OSS网络连接）
            power: 授权书（OSS网络连接）
            handIdCard: 手持身份证和授权书照/活体验证照片（OSS网络连接）
            notifyUrl: 查询结果通知回调地址（回调采用form-data格式，当http请求状态非200状态，认为通知失败，通知失败重试机制：
                       共重试2次，重试间隔时间：10s 10s（如果中间重试请求成功，则中断不再重试）， 如回调失败请主动获取查询结果）
            type: 查询类型（"0":生产 "1":测试）</template>
            </pre>
          </td>
        </tr>
        <template v-if="interItem.jfCode != 'JF021'">
          <tr>
            <td>加密说明</td>
            <td>
            <pre style="white-space: pre-line;">
              加密模式：AES-CBC
              密钥长度：128
              填充模式：NoPadding(不填充)
              向量：0000000000000000
            例如明文：肖卫国  加密后得密文  AD4919E41A85CBCE41637FF0C283C420</pre>
            </td>

          </tr>
          <tr>
            <td>对req_params的值加密</td>
            <td>
              加密部分(req_params的值)：
              <pre style="white-space: nowrap;">
              {
              <template v-for="(objValue,key,index) of this.ywcs.input">
                {{ '"' + key + '":' + '"' + objValue + '",' }} <br>
              </template>
              }

            ---> "80654464E4C4AF823D53......."</pre>
              构成新请求体(发送给本服务侧)：
              <pre style="white-space: pre-line;"> {
                 "request_sn": "20230602020740639KIBG",
                 "req_time": "1701247396000",
                 "inter_id": "{{ interItem.jfCode }}",
                 "req_params": "80654464E4C4AF823D53......."
                  }
            </pre>
            </td>
          </tr>
          <tr>
            <td>密文Response JSON样例</td>
            <td><pre style="white-space: pre-line;">{
        "response_sn": "20231123164222928TVRE",
        "retdata": "查询到的有效信息密文",
        "request_sn": "20230602020740639KIBG",
        "retmsg": "交易成功",
        "retcode": "000000"
  }</pre>
            </td>
          </tr>
        </template>
        <tr>
          <td>明文Response JSON样例说明</td>
          <td>
            <pre style="white-space: pre-line;">
              request_sn 本次请求单号。
              response_sn 返回单号。
              retdata 查询的有效信息密文(取出后请使用AES解密算法结合密钥解密可获得有效JSON信息)。
              retmsg 返回描述。
              retcode 系统代码。</pre>
          </td>
        </tr>
        <tr v-if="interItem.jfCode == 'JF019'">
          <td>主动获取查询结果</td>
          <td>
            <pre style="white-space: pre-line;">
              请求url: http://jiekou.funishe.com/prod-api/jiekou/getCreditData (GeT请求)
              参数orderNo: 查询请求返回结果中"order_no"字段值
              参数type: 查询类型。 "0"：生产，"1"：测试</pre>
          </td>
        </tr>
        </tbody>
      </table>

      <table class="table table-bordered" style="margin: 10px">
        <tbody>
        <tr>
          <th colspan="3">查询的信息字段说明（retdata解密后）</th>
        </tr>
        <tr>
          <th><span>参数</span></th>
          <th><span>参数名称 </span></th>
          <th><span>描述与备注</span></th>
        </tr>
        <template v-for="(item, index ) in ywcs.retdata">
          <tr>
            <td>{{ item[0] }}</td>
            <td>{{ item[1] }}</td>
            <td>
              <template v-if="item[2] == 'downloald'">
                <el-button @click="downloadFile(ywcs.file)">下载字段说明文件</el-button>
              </template>
              <template v-else>
                {{ item[2] }}
              </template>
            </td>
          </tr>
        </template>
        </tbody>
      </table>

      <table class="table table-bordered" style="margin: 10px">
        <tbody>
        <tr>
          <th colspan="3">查询结果说明（retcode与retmsg）</th>
        </tr>
        <tr>
          <th><span>retcode </span></th>
          <th><span>retmsg </span></th>
        </tr>
        <template v-for="(item, index ) in ywcs.retcode">
          <tr>
            <td>{{ item[0] }}</td>
            <td>{{ item[1] }}</td>
          </tr>
        </template>

        </tbody>
      </table>

    </el-tab-pane>

    <el-tab-pane label="参考文档" name="second">
      <PDFViewer :PDFfileInfo="interInfo"></PDFViewer>
    </el-tab-pane>

  </el-tabs>
</template>

<script>

  import PDFViewer from '../../components/PDFViewer'
  import {params} from '../../../utils/params.js'
  import {jieKouExcel, jieKoutxt} from "@/api/jiekou/jiekou";

  export default {
    components: {PDFViewer},
    data() {
      return {
        activeName: 'first',
        interInfo: {
          jfCode: undefined,
          name: undefined,
          source: undefined
        },
        interItem: null,
        ywcs: null,
        respParams: null,
        returnParams: null
      };
    },
    created() {
      this.interItem = this.$route.query
      this.interInfo.jfCode = this.$route.query.jfCode
      this.interInfo.name = this.$route.query.name
      this.interInfo.source = this.$route.query.source
      this.ywcs = params[this.interInfo.jfCode]
    },
    methods: {
      handleClick(e) {
      },

      downloadFile(value) {
        console.log( this.ywcs)
        console.log('---', window.location.origin + process.env.VUE_APP_BASE_API + '/common/download/resource?resource=/profile/' + value)
        window.location.href = window.location.origin + process.env.VUE_APP_BASE_API + '/common/download/resource?resource=/profile/' + value
      },

      // xzzdsmwj() {
      //   jieKouExcel(this.interItem.name).then(response => {
      //       let blob = new Blob([response], {
      //         type: `application/xls` //word文档为msword,pdf文档为pdf
      //       });
      //       let objectUrl = URL.createObjectURL(blob)
      //       let link = document.createElement("a")
      //       let fname = this.interItem.name + '.xls' //下载文件的名字
      //       link.href = objectUrl
      //       link.setAttribute("download", fname)
      //       document.body.appendChild(link)
      //       link.click();
      //     }
      //   )
      // },
      //
      // mgxxSCCode() {
      //   jieKoutxt().then(response => {
      //       let blob = new Blob([response], {
      //         type: `application/txt` //word文档为msword,pdf文档为pdf
      //       });
      //       let objectUrl = URL.createObjectURL(blob)
      //       let link = document.createElement("a")
      //       let fname = 'secrit.txt' //下载文件的名字
      //       link.href = objectUrl
      //       link.setAttribute("download", fname)
      //       document.body.appendChild(link)
      //       link.click();
      //     }
      //   )
      // }
    }
  }
</script>

